import React, { Component } from 'react'
// 导入scss样式模块
import './tabbar.scss'
export default class Tabbar extends Component {
   //设置切换状态数据
    state={
        activeTab: 'Home',
        activeTabPathMap:{
            Home: '/Home',
            Category: '/Category',
            Cart: '/Cart',
            My: '/My'
        }
    }
    componentDidMount(){
      // console.log("componentDidMount执行啦");
      //获取当前路由下的url路径并拆分
      let activeTab = this.props.match.url.split("/")[1];
      this.setState({
          activeTab
      })
    }
    handleClick = (activeTab) => {
        this.setState({
            activeTab
        },()=>{
         //点击底部菜单跳转对应路由页面
        this.props.history.push(this.state.activeTabPathMap[activeTab])
        })
       
    }
    
    render() {
        return (
          <div className="tabbarContainer">
            {/* tabbar内容栏开始 */}
        <div className="tabbarContent">{this.props.children}</div>
            {/* tabbar内容栏结束 */}
            {/* 底部导航栏开始 */}
            <div className="tabbar">
              <div className="tabbarItem" onClick={this.handleClick.bind(this,'Home')}>
                <i className={this.state.activeTab ==='Home'?"icon icon-home-o":"icon icon-home"}></i>
                <span className={this.state.activeTab === 'Home' ?"title active":"title"}>首页</span>
              </div>
              <div className="tabbarItem" onClick={this.handleClick.bind(this,'Category')}>
                <i className={this.state.activeTab==='Category'?'icon icon-community-o':'icon icon-community'}></i>
                <span className={this.state.activeTab==='Category' ? 'title active':'title'}>分类</span>
              </div>
              <div className="tabbarItem" onClick={this.handleClick.bind(this,'Cart')}>
                {/* icon icon-cart */}
                <i className={this.state.activeTab === 'Cart'?'icon icon-cart-o':'icon icon-cart'}></i>
                <span className={this.state.activeTab==='Cart' ? 'title active' : 'title'}>购物车</span>
              </div>
              <div className="tabbarItem" onClick={this.handleClick.bind(this,'My')}>
                <i className={this.state.activeTab === 'My'?'icon icon-my-o':'icon icon-my'}></i>
                <span className={this.state.activeTab==='My' ? 'title active' : 'title'}>我的</span>
              </div>
            </div>
            {/* 底部导航栏结束*/}
          </div>
        );
    }
}
